<template>
  <!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->
  <van-notice-bar scrollable :text="showText" />
  <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
    <van-swipe-item><img src="../assets/cangzhoushifan-01.jpg"></van-swipe-item>
    <van-swipe-item><img src="../assets/cangzhoushifan-02.jpg"></van-swipe-item>
    <van-swipe-item><img src="../assets/qiyuelou-01.jpg"></van-swipe-item>
    <van-swipe-item><img src="../assets/tushuguan-01.jpg"></van-swipe-item>
  </van-swipe>

  <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
    试试心动模式 ~~ 快速匹配和你标签相同的学习伙伴哦~
  </van-notice-bar>

  <van-cell  center title="心动模式">
    <template #right-icon>
      <van-switch v-model="isMatchMode" size="24" />
    </template>
  </van-cell>
  <user-card-list :user-list="userList" :loading="loading"/>
  <van-empty v-if="!userList || userList.length < 1" description="数据为空"/>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import myAxios from "../api/myAxios";
import {Toast} from "vant";
import UserCardList from "../components/UserCardList.vue";
import {UserType} from "../models/user";

const isMatchMode = ref<boolean>(false);

const userList = ref([]);
const loading = ref(true);
const showText = ref('欢迎来到沧州师范学院, 校园学习搭子匹配, 祝你在这里能找到志同道合的学习伙伴~~~');

/**
 * 加载数据
 */
const loadData = async () => {
  let userListData;
  loading.value = true;
  // 心动模式，根据标签匹配用户
  if (isMatchMode.value) {
    const num = 10;
    userListData = await myAxios.get('/user/match', {
      params: {
        num,
      },
    }).then(function (response) {
          console.log('/user/match succeed', response);
          return response?.data;
        })
        .catch(function (error) {
          console.error('/user/match error', error);
          Toast.fail('请求失败');
        })
  } else {
    // 普通模式，直接分页查询用户
    userListData = await myAxios.get('/user/recommend', {
      params: {
        pageSize: 8,
        pageNum: 1,
      },
    }).then(function (response) {
          console.log('/user/recommend succeed', response);
          return response?.data;
        })
        .catch(function (error) {
          console.error('/user/recommend error', error);
          Toast.fail('请求失败');
        })
  }
  if (userListData) {
    userListData.forEach((user: UserType) => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
  loading.value = false;
}

watchEffect(() => {
  loadData();
})

</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 200px;
  text-align: center;
  background-color: #39a9ed;
}
.my-swipe img{
  width: 100%;
  height: 100%;
}
</style>
